<template>
  <DataTable url="branch/list" :transform="transformBranch" ref="ds">
    <template #tools="table">
      <Button icon="jeicon-add" color="primary" @click="add"><Lang zh="新增"/></Button>
      <Button :disabled="selects.length!=1" icon="h-icon-edit" text-color="primary" @click="editFirst"><Lang zh="修改"/></Button>
      <Poptip :disabled="selects.length==0" class="h-btn" content="确定删除所选记录？" @confirm="del">
        <Button icon="h-icon-trash"  text-color="red" :disabled="selects.length==0"><Lang zh="删除"/></Button>
      </Poptip>
    </template>
    <template #default="table">
      <Table ref="tb" :datas="table.data" :loading="table.loading" @trDblClick="edit" @select="selected" checkbox selectWhenClickTr>
        <TableItem :title="$t('序号','Serial')" prop="$serial" :width="50"></TableItem>
        <TableItem :title="$t('名称','Name')" prop="name" isTreeOpener></TableItem>
        <TableItem :title="$t('机构代码','Branch Code')" :width="120" prop="code"></TableItem>
        <TableItem :title="$t('全称','Full Name')" prop="fullName"></TableItem>
        <TableItem :title="$t('内部编码','Inner Code')" :width="120" prop="sn"></TableItem>
        <TableItem :title="$t('类型','Type')" :width="120" prop="type" dict="BranchType"></TableItem>
        <TableItem :title="$t('状态','Status')" :width="120">
          <template #default="{data}">
            <Switch @change="changeEnable(data)" v-model="data.enable" trueValue="1" falseValue="0">
              <template v-slot:open><Lang zh="启用"/></template>
              <template v-slot:close><Lang zh="禁用"/></template>
            </Switch>
          </template>
        </TableItem>
      </Table>
    </template>
  </DataTable>
  <Dialog href="platform/branchDialog.vue" ref="dlg" hasDivider hasCloseIcon>
    <template #header><Lang zh="部门管理" en="Department"/></template>
    <template #footer="dlg">
      <Button @click="dlg.cancel"><Lang zh="取消"/></Button>
      <Button :loading="dlg.loading" color="primary" @click="dlg.submit"><Lang zh="确认"/></Button>
    </template>
  </Dialog>
</template>
<script setup>
import {ajax, util,default as framework} from 'framework'
import {ref,reactive,nextTick} from 'vue'
import {message} from 'heyui'
import {$t} from 'i18n'
//import Dialog from "../coms/Dialog.vue";

//status
const showSearch = ref(false), selects = ref([]), dlg = ref(null)
//const table = ajax.createDs('branch/list')
const ds=ref(null),tb=ref()
const branchOpts = reactive({
  keyName: 'id',
  titleName: 'fullName',
  dataMode: 'tree',
  datas: []
})
//数据转换 部门数据转换
function transformBranch(data){
  setTimeout(()=>nextTick(()=>{
    tb.value.expandAll()
  }))
  console.log("1111")
  return branchOpts.datas = util.asTree(data, "id", "pid")
}

// Vue.onMounted(() => {
//   table.load()
// })

function reload() {
  framework.cleanBranches()
  selects.value = []
 // table.load()
  ds.value.reload()
}

function search() {
  selects.value = []
  ds.value.reload()
}

function selected(v) {
  selects.value = v.map(it => util.fields(it, 'id,sn'))
}
async function add(){
 await dlg.value.open({branchOpts})
  reload()
}
function editFirst() {
  if (selects.value.length == 0) {
    return;
  }
  edit(selects.value[0])
}

async function edit(v) {
  let params=util.fields(v,'id,sn')
  params.branchOpts=branchOpts
  await dlg.value.open(params)
  reload()
  //dlg.value.show(util.fields(v, 'id,sn'))
}

function del() {
  ajax.post('branch/delete', selects.value).then(r => {
    reload()
  })
}
function changeEnable(data){
  ajax.post( 'branch/save', util.fields(data,"id,enable,type,fullName,name,code")).then(r => {
    message("已保存")
    framework.cleanBranches()
  }).catch(e=>{
    reload()
  }).finally(e => {
  })
}
</script>
